<template>
    <div style="background-color: #f7f7f7;padding-bottom: 130rem;">
        <div class="w100 haed bbg pr">
            <img @click="onBack" class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;"
                src="../assets/img/back.png">
            <p class="fz37 cfff hpd tc">注册</p>
        </div>
        <form onsubmit="return false;" class="pr bsb dbc" v-loading="loading">
            <div class="ptb message">
                <label>
                    <p>负责人： </p>
                    <input type="text" ref="principal" v-model="form.principal" placeholder="输入负责人姓名">
                </label>
                <label>
                    <p>身份证号码： </p>
                    <input type="text" ref="idnum" v-model="form.idnum" placeholder="输入负责人身份证号码">
                </label>
                <label>
                    <p>手机号： </p>
                    <input type="text" ref="tel" v-model="form.tel" placeholder="输入手机号">
                </label>
                <label class="pr">
                    <p>验证码： </p>
                    <input type="text" ref="verificaCode" v-model="form.verificaCode" placeholder="输入验证码"
                        :maxlength="codeLength">
                    <input type="button" class="get-code pa" :class="code" :disabled="code.isDisabled" :value="code.val"
                        @click="getCode">
                    <span class="pa ward"></span>
                </label>
                <label>
                    <p>店名： </p>
                    <input type="text" ref="name" v-model="form.name" placeholder="输入店名">
                </label>
                <label>
                    <p>工商营业执照号码： </p>
                    <input type="text" ref="license" v-model="form.license" placeholder="输入营业执照号">
                </label>
                <label>
                    <p>经营区域： </p>
                    <select class="select" ref="location" v-model="form.location">
                        <option value="" disabled selected hidden>选择县区</option>
                        <option v-for="el in options" :value="el.value">{{ el.name }}</option>
                    </select>
                </label>
                <label class="address">
                    <p>地址： </p>
                    <input type="text" ref="address" v-model="form.address" placeholder="输入详细地址">
                </label>
            </div>
            <div class="ptb introduce">
                <p class="mb20 f25">商家介绍</p>
                <textarea class="w100 p20 bsb" ref="introduce" v-model="form.introduce"
                    placeholder="请准确的介绍一下公司的情况"></textarea>
            </div>
            <div class="ptb id-number">
                <p class="mb20 f25">身份证正反面照片</p>
                <Uploader :max-count="1" v-model="form.fileList1" :after-read="afterRead1">
                    <div class="upload tc">
                        <img class="image" src="../assets/img/login/add.png">
                        <p>上传人像面</p>
                    </div>
                </Uploader>
                <Uploader :max-count="1" v-model="form.fileList2" :after-read="afterRead2">
                    <div class="upload tc">
                        <img class="image" src="../assets/img/login/add.png">
                        <p>上传国徽面</p>
                    </div>
                </Uploader>
            </div>
            <div class="ptb license">
                <p class="mb20 f25">营业执照</p>
                <Uploader :max-count="1" v-model="form.fileList3" :after-read="afterRead3" >
                    <div class="upload tc">
                        <img class="image" src="../assets/img/login/add.png">
                        <p>上传照片</p>
                    </div>
                </Uploader>
            </div>
            <div class="ptb facade">
                <p class="mb20 f25">门面照片</p>
                <Uploader :max-count="1" v-model="form.fileList4" :after-read="afterRead4">
                    <div class="upload tc">
                        <img class="image" src="../assets/img/login/add.png">
                        <p>上传照片</p>
                    </div>
                </Uploader>
            </div>
            <button @click="registerIn" class="dbc cfff f25 enroll">注册</button>
        </form>
    </div>
</template>

<script>
import { Uploader,Icon ,Toast  } from 'vant';
import 'vant/lib/Uploader/style';
import 'vant/lib/icon/style';
import 'vant/lib/toast/style';
import { register } from '../api/index'
export default {
    components: { Uploader, Icon },
    data() {
        return {
            code: {
                isDisabled: false,
                val: '获取验证码',
                num: 60,
                constantly: false
            },
            form: {
                principal: '',
                idnum: '',
                tel: '',
                verificaCode: '',
                name: '',
                license: '',
                location: '',
                address: '',
                introduce: '',
                fileList1: [],
                fileList2: [],
                fileList3: [],
                fileList4: [],
            },
            options: [
                { value: '1', name: '商丘' },
                { value: '2', name: '焦作' },
                { value: '3', name: '郑州' },
                { value: '4', name: '周口' },
                { value: '5', name: '信阳' }
            ],
            ValiRegexStr: {
                principal: /^[a-zA-Z\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/,
                idnum: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
                tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            },
            show: false,
            codeLength: 6,
            loading: false
        }
    },
    methods: {
        onBack() {
            this.$router.back();
        },
        registerIn() {
            if (this.form.principal == '' || !this.ValiRegexStr.principal.test(this.form.principal)) {
                this.$refs.principal.focus();
                Toast('负责人信息格式不正确');
                return;
            }
            if (this.form.idnum == '' || !this.ValiRegexStr.idnum.test(this.form.idnum)) {
                this.$refs.idnum.focus();
                Toast('请输入正确的身份证号');
                return;
            }
            if (this.form.tel == '' || !this.ValiRegexStr.tel.test(this.form.tel)) {
                this.$refs.tel.focus();
                Toast('请输入正确的手机号码');
                return;
            }
            if (this.form.verificaCode == '') {
                this.$refs.verificaCode.focus();
                Toast('请输入验证码');
                return;
            }
            if (this.form.name == '') {
                this.$refs.name.focus();
                Toast('请输入店名');
                return;
            }
            if (this.form.license == '') {
                this.$refs.license.focus();
                Toast('请输入营业执照号');
                return;
            }
            if (this.form.location == '') {
                this.$refs.location.focus();
                Toast('请选择区县');
                return;
            }
            if (this.form.address == '') {
                this.$refs.address.focus();
                Toast('请输入地址');
                return;
            }
            if (this.form.introduce == '') {
                this.$refs.introduce.focus();
                Toast('请输入简介');
                return;
            }
            if (this.form.fileList1.length == 0) {
                Toast('请上传人像面');
                return;
            }
            if (this.form.fileList2.length == 0) {
                Toast('请上传国徽面');
                return;
            }
            if (this.form.fileList3.length == 0) {
                Toast('请上传营业执照');
                return;
            }
            if (this.form.fileList4.length == 0) {
                Toast('请上传门面照片');
                return;
            }
            this.loading = true;
            register({
                principal: this.form.principal,
                idnum: this.form.idnum,
                tel: this.form.tel,
                name: this.form.name,
                license: this.form.license,
                address: this.form.address,
                introduce: this.form.introduce,
            })
                .then(r => {
                    if (r.code === 200) {
                        console.log(r)
                        Toast.success('注册成功');
                        setTimeout(() => {
                            this.form = {};
                            this.loading = false;
                            this.$router.push('/login');
                        }, 500)
                        return;
                    } else {
                        Toast.fail('注册失败');
                    }
                })
                .catch(e => {
                    console.log(e);
                })
        },
        getCode() {
            this.code.isDisabled = true;
            this.code.constantly = true;
            let codeVal = this.code.val;
            this.code.val = `${codeVal}(${this.code.num})`;
            let time = setInterval(() => {
                if (this.code.num <= 1) {
                    clearInterval(time);
                    this.code.isDisabled = false;
                    this.code.constantly = false;
                    this.code.val = '获取验证码';
                    this.code.num = 60;
                    return;
                }
                this.code.num--;
                this.code.val = `${codeVal}(${this.code.num})`;
            }, 1000)
        },
        openValue() {
            this.show = !this.show;
        },
        getValue(index, item) {
            this.form.area = item.name;
            this.show = true;
        },
        clearShow() {
            setTimeout(() => {
                this.show = false;
            }, 50);
        },
        afterRead1(file){
            // console.log(file);
        },
        afterRead2(file){
            // console.log(file);
        },
        afterRead3(file){
            // console.log(file);
        },
        afterRead4(file){
            // console.log(file);
        }
    }
}
</script>

<style scoped>
* {
    font-size: 25rem;
}

form {
    width: 705rem;
    margin-top: -285rem;
}

.ptb {
    padding: 43rem 30rem;
}

.message,
.introduce,
.id-number,
.license,
.facade {
    border-radius: 20rem;
    background-color: #fff;
    margin-bottom: 20rem;
}

form .facade {
    margin-bottom: 70rem;
}

.message label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rem;
}

.message p {
    font-size: 25rem;
}

.message label input,
form .message .select {
    width: 415rem;
    outline: none;
    border-radius: 40rem;
    border: 1rem solid #e8e8e8;
    padding: 20rem 0 20rem 25rem;
    box-sizing: border-box;
    appearance: none;
}
form .message .select{
    color: #e8e8e8;
}
.message label input::placeholder,
form .introduce textarea::placeholder {
    color: #e8e8e8;
}

form .message .select {
    background: url(../assets/img/login/collect.png) no-repeat;
    background-position: 90% 28rem;
    background-size: 6%;
}

form .address input {
    margin: 0;
}

form .message label .get-code {
    border: none;
    background: transparent;
    right: 0;
    width: 210rem;
    color: #1a6eee;
}

form .message label .ward {
    height: 35rem;
    border-left: 5rem solid #e8e8e8;
    right: 180rem;
}

form .introduce textarea {
    height: 230rem;
    border-radius: 20rem;
    border: 1rem solid #e8e8e8;
    overflow: scroll;
}

form .upload {
    width: 150rem;
    height: 150rem;
    color: #e8e8e8;
    border-radius: 20rem;
    border: 1rem solid #e8e8e8;
    margin-right: 20rem;
}

form .upload .image {
    width: 32rem;
    height: 32rem;
    margin-top: 35rem;
    margin-bottom: 20rem;
}

form .upload p {
    color: #e8e8e8;
}

form .enroll {
    width: 525rem;
    border: none;
    border-radius: 40rem;
    display: block;
    padding: 28rem 0 20rem;
    background: linear-gradient(to right, #3687fe, #0762e6);
}

.constantly {
    color: #ccc !important;
}
</style>